<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="zui/zui.css">
    <script src="zui/zui.js"></script>
    <style>
        #list {
            margin: 32px;
            display: flex;
            justify-content: center;
            gap: 26px;
        }
    </style>
</head>

<body>
    <div id="list">
        <button class="btn primary">按钮1</button>
        <button class="btn primary">按钮2</button>
        <button class="btn primary">按钮3</button>
    </div>
    <div id="myColorPicker"></div>
</body>
<script>
    class ButtonClick {
        constructor(buttons, a) {
            this.buttons = buttons;
            this.a = a;
            buttons.forEach(btn => {
                // clickHandle1中的this会变成被点击的button对象
                // btn.addEventListener('click', this.clickHandle1);
                // 方法1：使用bind绑定当前类实例对象，使clickHandle2中的this不改变
                btn.addEventListener('click', this.clickHandle2.bind(this, btn));
                // 方法2
                btn.addEventListener('click', (e) => this.clickHandle1(e))
            });
        }

        clickHandle1(e) {
            console.log('clickHandle1', this);
        }

        clickHandle2(button, e) {
            console.log('clickHandle2', button, this);
        }

    }
    new ButtonClick(document.querySelectorAll('.btn'),1);
    //new ButtonClick(document.querySelectorAll('.btn'),2);
</script>

</html>